<template>
	<div id="top">
		<the-header-top></the-header-top>
		<logo-bar></logo-bar>
		
		<div class="identity-authentication">
			<div class="identity-authentication-container">
				<!--路径-->
				<ul class="breadcrumb">
					<li><router-link to="/">{{ $t('message.home') }}</router-link></li>
					<li><router-link to="/personal">{{$t('message.personalCenter')}}</router-link></li>
					<li><router-link to="/personal/identity">{{$t('message.identityAuthentication')}}</router-link></li>
					<li>{{ breadcrumb }}</li>
				</ul>
				<!--申请身份认证-->
				<div class="authentication">
					<!--标题-->
					<div class="authentication-title">{{ breadcrumb }}</div>
          <!--进度条-->
          <v-progress-bar :length="3" :active="progress" class="identity-progress-bar"></v-progress-bar>
          <ul class="identity-progress-text">
            <li>{{ $t('message.PersonalIdentityAuthenticationFillIdentityInfo') }}</li>
            <!-- <li>{{ $t('message.PersonalIdentityAuthenticationFillStudentInfo') }}</li> -->
            <li>{{ $t('message.emergencyContact') }}</li>
            <li>{{ $t('message.PersonalIdentityAuthenticationSubmitCertification') }}</li>
          </ul>
          <router-view></router-view>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import TheHeaderTop from '@/components/base/TheHeaderTop'
import LogoBar from '@/components/base/LogoBar'
import VProgressBar from '@/components/base/VProgressBar'

export default {
  components: {
    TheHeaderTop,
    LogoBar,
    VProgressBar
  },
  data () {
    return {
    }
  },
  methods: {
  },
  computed: {
    breadcrumb () {
      let route = this.$route.path
      if (route.indexOf('identity') >= 0) {
        return this.$t('message.identityAuthentication')
      } else if (route.indexOf('student') >= 0) {
        return this.$t('message.studentAuthen')
      } else if (route.indexOf('contacts') >= 0) {
        return this.$t('message.emergencyContact')
      } else if (route.indexOf('success') >= 0) {
        return this.$t('message.submitIdentityConfirmSuccess')
      } else {
        return this.$t('message.identityAuthentication')
      }
    },
    progress () {
      let route = this.$route.path
      if (route.indexOf('identity') >= 0) {
        return 1
      } else if (route.indexOf('contacts') >= 0) {
        return 2
      } else if (route.indexOf('success') >= 0) {
        return 3
      } else {
        return 3
      }/* else if (route.indexOf('student') >= 0) {
        return 2
      }  */
    }
  }
}
</script>

<style scoped>
.identity-authentication {
	min-width: 1200px;
	background-color: #f5f5f5;
	padding-bottom: 40px;
}

.identity-authentication-container {
	width: 1200px;
	margin: 0 auto;
}

.identity-authentication-container .breadcrumb {
  padding-top: 20px;
  overflow: hidden;
}

.identity-authentication-container .breadcrumb li {
  float: left;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #666;
}

.identity-authentication-container .breadcrumb a {
  color: #666;
}

.identity-authentication-container .breadcrumb a:after {
  content: "\003e";
  display: inline-block;
  height: 20px;
  padding: 0 4px;
}

.authentication {
	width: 1200px;
	background-color: #fff;
	margin-top: 20px;
	padding: 60px 0 80px;
}

.authentication-title {
	height: 33px;
	line-height: 33px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}

.identity-progress-bar {
  margin-top: 60px !important;
}

.identity-progress-text {
  width: 600px;
  margin: 20px auto 60px;
  overflow: hidden;
}

.identity-progress-text li {
  float: left;
  width: 200px;
  font-size: 16px;
  line-height: 22px;
  text-align: center;
}
</style>